<template>
	<scroll-view scroll-y="true" lower-threshold="200" style="height:100vh" @scrolltolower="_lower" enable-back-to-top='true'>
		<view class="hint-view">
			<view>表情包Github地址:
				<text style="color:#91d5ff" @click="onGithubClick">ChineseBQB(zhaoolee)</text>
			</view>
			<view class="copy-button" @click="copyText(github)">复制链接</view>
		</view>
		<view class="weui-grids menu-grid">
			<block v-for="(item,index) in bqbList" :key="index">
				<view class="weui-grid menu-item" @click="onMenuClick(item)">
					<image class="menu-image" :src="item.bqb_img"></image>
					<view class="weui-grid__label menu-item_label">{{item.bqb_name}}</view>
				</view>
			</block>
		</view>
	</scroll-view>
</template>

<script>
	import {
		chbqbDetail,
		webView
	} from '@/router.js'
	export default {
		data() {
			return {
				bqbList: [],
				pageNum: 1,
				github: 'https://github.com/zhaoolee/ChineseBQB'
			}
		},
		onLoad() {
			this.getBqbData()
		},
		methods: {
			_lower() {
				let bqbAllList = this.bqbAllList
				this.bqbList = bqbAllList.slice(0, this.pageNum * 20)
				this.pageNum = this.pageNum + 1
			},
			getBqbData() {
				uni.showLoading({
					title: '加载中'
				})
				uniCloud.callFunction({
					name: 'json-data',
					data: {
						action: "chbqb"
					},
					success: (res) => {
						console.log(res)
						wx.hideLoading()
						let bqbAllList = res.result
						this.bqbAllList = bqbAllList
						this._lower()
					}
				})
			},
			onMenuClick(bqbData) {
				console.log('onMenuClick', bqbData)
				uni.navigateTo({
					url: chbqbDetail + "?bqbData=" + encodeURI(JSON.stringify(bqbData))
				})
			},
			onGithubClick() {
				let github = this.github
				wx.navigateTo({
					url: webView + "?url=" + github
				})
			},
			// 复制文字监听
			copyText(text) {
				console.log("copyText", text)
				if (typeof text == 'object')
					text = text[0]
				uni.setClipboardData({
					data: text,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.menu-grid {
		margin: 10px 15px;
		border: 1px solid white;
	}

	.menu-item {
		width: 33.3%;
		padding: 5px 5px;
		text-align: center;
	}

	.menu-image {
		width: 60px;
		height: 60px;
		border-radius: 6px;
		box-shadow: 0 0 5px #555;
	}

	.menu-item_label {
		margin-top: 0px;
		font-size: 13px;
	}

	.copy-button {
    height: 17px;
    color: #fff;
    font-size: 10px;
    margin-left: 30px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #91c2e8;
	}

	.hint-view {
		display: flex;
		padding: 10px;
		padding-bottom: 3px;
		font-size: smaller;
		color: gray;
		flex-direction: row;
		justify-content: center;
	}
</style>
